<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" :title="actInfo.name" width="70%" draggable modal-class="bg-[#f2f3f5]">
      <ma-crud :options="crudPrice" :columns="columnsPrice" ref="crudPriceRef"></ma-crud>
<!--      <a-layout-content class="block lg:flex lg:justify-between">-->
<!--        <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 bg-white">-->
<!--          <a-tabs type="rounded">-->
<!--            <a-tab-pane key="operation-log" title="活动金额">-->
<!--              <ma-crud :options="crudPrice" :columns="columnsPrice" ref="crudPriceRef"></ma-crud>-->
<!--            </a-tab-pane>-->
<!--          </a-tabs>-->
<!--        </div>-->
<!--        <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3 bg-white">-->
<!--          <a-tabs type="rounded">-->
<!--            <a-tab-pane key="operation-log" title="结算周期">-->
<!--              <ma-crud :options="crudCycle" :columns="columnsCycle" ref="crudCycleRef"></ma-crud>-->
<!--            </a-tab-pane>-->
<!--          </a-tabs>-->
<!--        </div>-->
<!--      </a-layout-content>-->

    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import apiPrice from '@/api/prm/act_price.js'
import apiCycle from '@/api/prm/act_price_cycle.js'
import {Message} from "@arco-design/web-vue";

const visible = ref(false)
const actInfo = ref({})
const crudPriceRef = ref()
const crudCycleRef = ref()

const open = (record) => {
  visible.value = true
  actInfo.value = record

  crudPriceRef.value.requestData()
  crudCycleRef.value.requestData()
}


const changeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}

const crudPrice = reactive({
  autoRequest: false,
  api: apiPrice.list,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: apiPrice.add},
  edit: {show: true, api: apiPrice.update},
  delete: {show: true, api: apiPrice.delete},
  formOption: {viewType: 'modal', width: 400},
  beforeRequest: (params) => {
    params.act_id = actInfo.value.id
    return true
  },
  beforeAdd: (params) => {
    params.act_id = actInfo.value.id
    return true
  }
})

const columnsPrice = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '任务', dataIndex: 'task_name', commonRules: [{required: true, message: '必须填写任务名称'}]},
  {title: '原单价', dataIndex: 'ori_price', formType: 'input-number', commonRules: [{required: true, message: '必须填写原单价'}], search: false},
  {title: '高级价格', dataIndex: 'h_price', formType: 'input-number', commonRules: [{required: true, message: '必须填写高级价格'}], search: false},
  {title: '中级价格', dataIndex: 'm_price', formType: 'input-number', commonRules: [{required: true, message: '必须填写中级价格'}], search: false},
  {title: '初级价格', dataIndex: 'l_price', formType: 'input-number', commonRules: [{required: true, message: '必须填写初级价格'}], search: false},

  {title: '数据反馈', dataIndex: 'data_back', },
  {title: '结算时间', dataIndex: 'js_desc', },

  {title: '排序', dataIndex: 'sort', formType: 'input-number', width: 100},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

//
// const crudCycle = reactive({
//   autoRequest: false,
//   api: apiCycle.list,
//   showIndex: false,
//   rowSelection: {showCheckedAll: true},
//   operationColumn: true,
//   operationColumnWidth: 180,
//   add: {show: true, api: apiCycle.add},
//   edit: {show: true, api: apiCycle.update},
//   delete: {show: true, api: apiCycle.delete},
//   formOption: {viewType: 'modal', width: 400},
//   beforeRequest: (params) => {
//     params.act_id = actInfo.value.id
//     return true
//
//   },
//   beforeAdd: (params) => {
//     params.act_id = actInfo.value.id
//     return true
//   }
// })
//
// const columnsCycle = reactive([
//   {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
//   {title: '标题', dataIndex: 'title', formType: 'input', search: false},
//   {title: '描述', dataIndex: 'cycle', formType: 'input', search: false},
//   {title: '排序', dataIndex: 'sort', formType: 'input-number', width: 200},
//   {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
// ])

defineExpose({ open })

</script>
